<template setup>
  <a-alert
    v-if="visible"
    v-bind:message="message"
    v-bind:description="description"
    v-bind:type="type"
    show-icon
    closable
    :after-close="handleClose"
  />
</template>

<script lang="ts">
import {
  defineComponent,
  onBeforeUnmount,
  onDeactivated,
  onUnmounted,
  PropType,
  ref,
  toRefs,
} from "vue";
export default defineComponent({
  props: {
    alertDirection: {
      required: true,
    },
    alertType: {
      // type: Object as PropType<AlertType>,
      // type: String,
      required: true,
    },
  },
  setup(props) {
    // const test = toRefs(props);
    // console.log(test)
    const visible = ref<boolean>(true);
    const description = ref(toRefs(props).alertDirection);
    const message = ref(toRefs(props).alertType);
    const type = ref(toRefs(props).alertType);
    const handleClose = () => {
      visible.value = false;
    };

    const close = (e: MouseEvent): void => {
      console.log("提示组件关闭");
    };

    onUnmounted(() => {});

    onBeforeUnmount(() => {
      
    });

    return {
      description,
      type,
      message,
      visible,
      handleClose,
      close,
    };
  },
});
</script>
